<style lang="scss" scoped>
  .app-container {
    .now-data {
      background: #fff;
      padding: 10px;
      border-radius: 10px;

      p {
        font-size: 18px;
        line-height: 28px;
        color: rgba(17, 38, 60, 1);
        border-left: 4px solid #545BF5;
        padding-left: 10px;
        margin: 0 0 15px 0;
      }

      .s-col {
        margin-bottom: 15px;

        .col-icon-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .img-wrap {
            width: 60px;
            height: 60px;
            margin-bottom: 10px;
            background: #D3FFF2;
            border-radius: 50%;

            img {
            }
          }

          .col-icon-item-txt {
            margin-bottom: 10px;
            font-size: 16px;
            font-weight: 400;
            color: rgba(156, 159, 167, 1);
          }

          .col-icon-item-num {
            font-size: 32px;
            font-weight: 700;
            color: rgba(3, 2, 2, 1);
          }
        }
      }
    }
    .table { background: #fff;
      ::v-deep .el-tabs__nav-wrap {
        &::after {
          content: "";
          height: 0;
        }
      }
      ::v-deep .el-tabs__item.is-active {
        color: #5E81F4;
      }

      ::v-deep .el-tabs__active-bar {
        background-color: #5E81F4;
      }
      span {
        display: inline-block;
        font-size: 18px;
        line-height: 28px;
        color: rgba(17, 38, 60, 1);
        border-left: 4px solid #545BF5;
        margin: 10px;
        padding-left: 10px;
      }
      .tab {
        margin: 10px;
        padding-left: 30px;
      }
    }
  }
</style>
<template>
  <div class="app-container">
    <!--第一行-->
    <div class="now-data" style="margin-bottom: 20px;">
      <p>问题账号实时数据</p>
      <el-row>
        <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4" class="s-col">
          <div class="col-icon-item">
            <div class="img-wrap">
              <img src="../../assets/images/分组 2.png" alt="">
            </div>
            <div class="col-icon-item-txt">今日异常已处理</div>
            <div class="col-icon-item-num">10</div>
          </div>
        </el-col>

        <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4" class="s-col">
          <div class="col-icon-item">
            <div class="img-wrap">
              <img src="../../assets/images/分组 3.png" alt="">
            </div>
            <div class="col-icon-item-txt">未售找回</div>
            <div class="col-icon-item-num">10</div>
          </div>
        </el-col>

        <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4" class="s-col">
          <div class="col-icon-item">
            <div class="img-wrap">
              <img src="../../assets/images/分组 4.png" alt="">
            </div>
            <div class="col-icon-item-txt">已售找回</div>
            <div class="col-icon-item-num">10</div>
          </div>
        </el-col>

        <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4" class="s-col">
          <div class="col-icon-item">
            <div class="img-wrap">
              <img src="../../assets/images/分组 6.png" alt="">
            </div>
            <div class="col-icon-item-txt">已售未换绑</div>
            <div class="col-icon-item-num">10</div>
          </div>
        </el-col>

        <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4" class="s-col">
          <div class="col-icon-item">
            <div class="img-wrap">
              <img src="../../assets/images/分组 6.png" alt="">
            </div>
            <div class="col-icon-item-txt">已售异常</div>
            <div class="col-icon-item-num">10</div>
          </div>
        </el-col>

        <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4" class="s-col">
          <div class="col-icon-item">
            <div class="img-wrap">
              <img src="../../assets/images/分组 6.png" alt="">
            </div>
            <div class="col-icon-item-txt">未售异常</div>
            <div class="col-icon-item-num">10</div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!--第二行-->
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="s-col">
        <div class="now-data">
          <p>异常金额汇总</p>
          <el-row>
            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="s-col">
              <div class="col-icon-item">
                <div class="img-wrap">
                  <img src="../../assets/images/分组 3.png" alt="">
                </div>
                <div class="col-icon-item-txt">今日异常已处理</div>
                <div class="col-icon-item-num">10</div>
              </div>
            </el-col>

            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="s-col">
              <div class="col-icon-item">
                <div class="img-wrap">
                  <img src="../../assets/images/分组 6.png" alt="">
                </div>
                <div class="col-icon-item-txt">未售找回</div>
                <div class="col-icon-item-num">10</div>
              </div>
            </el-col>

            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="s-col">
              <div class="col-icon-item">
                <div class="img-wrap">
                  <img src="../../assets/images/分组 6.png" alt="">
                </div>
                <div class="col-icon-item-txt">已售找回</div>
                <div class="col-icon-item-num">10</div>
              </div>
            </el-col>

            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="s-col">
              <div class="col-icon-item">
                <div class="img-wrap">
                  <img src="../../assets/images/分组 4.png" alt="">
                </div>
                <div class="col-icon-item-txt">已售未换绑</div>
                <div class="col-icon-item-num">10</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="s-col">
        <div class="now-data">
          <p>昨日已处理异常</p>
          <el-row>
            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="s-col">
              <div class="col-icon-item">
                <div class="img-wrap">
                  <img src="../../assets/images/分组 3.png" alt="">
                </div>
                <div class="col-icon-item-txt">今日异常已处理</div>
                <div class="col-icon-item-num">10</div>
              </div>
            </el-col>

            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="s-col">
              <div class="col-icon-item">
                <div class="img-wrap">
                  <img src="../../assets/images/分组 6.png" alt="">
                </div>
                <div class="col-icon-item-txt">未售找回</div>
                <div class="col-icon-item-num">10</div>
              </div>
            </el-col>

            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="s-col">
              <div class="col-icon-item">
                <div class="img-wrap">
                  <img src="../../assets/images/分组 6.png" alt="">
                </div>
                <div class="col-icon-item-txt">已售找回</div>
                <div class="col-icon-item-num">10</div>
              </div>
            </el-col>

            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="s-col">
              <div class="col-icon-item">
                <div class="img-wrap">
                  <img src="../../assets/images/分组 4.png" alt="">
                </div>
                <div class="col-icon-item-txt">已售未换绑</div>
                <div class="col-icon-item-num">10</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <!--第三行列表-->
    <el-row style="margin-top: 20px;">
      <el-col>
        <div class="table">
          <span>异常明细总汇----同步现有的异常管理表单</span>
          <div class="tab">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="王者荣耀" name="first"></el-tab-pane>
              <el-tab-pane label="元神" name="second"></el-tab-pane>
              <el-tab-pane label="穿越火线" name="third"></el-tab-pane>
              <el-tab-pane label="英雄联盟" name="fourth"></el-tab-pane>
            </el-tabs>
          </div>
          <div class="table">
            <el-table>
              <el-table-column prop="date" label="编号" width="100" align="center"/>
              <el-table-column prop="date" label="绑定手机" width="180" />
              <el-table-column prop="date" label="手机备注" width="180" />
              <el-table-column prop="date" label="状态" width="180" />
              <el-table-column prop="date" label="账号" width="180" />
              <el-table-column prop="date" label="密码" width="180" />
              <el-table-column prop="date" label="二次" width="180" />
              <el-table-column prop="date" label="金额" width="180" />
              <el-table-column prop="date" label="回收渠道" width="180" />
              <el-table-column prop="date" label="回收人" width="180" />
              <el-table-column prop="date" label="换绑人" width="180" />
              <el-table-column prop="date" label="回收编号" width="180" />
              <el-table-column prop="date" label="回收时间" width="180" />
              <el-table-column prop="date" label="异常原因" width="180" />
              <el-table-column prop="date" label="操作" width="180" />
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
    export default {
        data() {
            return {
                tabArr: []
            }
        }
    }
</script>
